<template>
  <div class="box">
    <!-- 头部 -->
    <div class="header">练习</div>
    <!-- 九宫格 -->
    <div class="jiu">
      <van-grid :border="false">
        <van-grid-item icon="edit" text="考点专练" color="#ee0a24" @click="jump" />
        <van-grid-item icon="photo-o" text="套卷练习" @click="jump2" />
        <van-grid-item icon="photo-o" text="仿真模考" @click="jump3" />
        <van-grid-item icon="photo-o" text="错题练习" @click="jump4" />
        <van-grid-item icon="photo-o" text="测评记录" @click="jump5" />
        <van-grid-item icon="photo-o" text="习题收藏" @click="jump6" />
      </van-grid>
    </div>

    <!-- 近期模考 -->
    <div class="bottom">
      <p class="p1">近期模考</p>
      <p class="p2">
        <span style="fontSize:14px;color:red">默认排序</span>
        <span style="fontSize:14px;color:darkgrey">时间</span>
      </p>
      <h3>暂无模考安排，敬请期待</h3>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {
   
  },
  methods: {
    //跳转
    jump() {
      this.$router.push("/point");
    },
    jump2() {
      this.$router.push("/volume");
    },
    jump3() {
      this.$router.push("/test");
    },
    jump4() {
      this.$router.push("/wrong");
    },
    jump5() {
      this.$router.push("/records");
    },
    jump6() {
      this.$router.push("/collection");
    },

    
  }
};
</script>

<style lang='scss' scoped>
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 100%;
  height: 100vh;
  background-color: #ddd;
  .header {
    text-align: center;
    font-size: 24px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #fff;
  }
  .jiu {
    width: 90%;
    background-color: #fff;
    margin: 0 anto;
    margin-left: 5%;
    margin-top: 3%;
    border-radius: 3%;
  }
  .bottom {
    width: 100%;
    height: 300px;
    background-color: #fff;
    margin-top: 3%;
    .p1 {
      font-size: 26px;
      color: #9e9e9e;
      padding: 3% 20px;
    }
    .p2 {
      display: flex;
      justify-content: space-between;
      padding: 0 2% 20px 20px;
    }
    h3 {
      text-align: center;
      line-height: 200px;
    }
  }
}
</style>
